<template>
    <el-header style="background-color: lightgray; text-align: right; font-size: 12px;height: 100px;">
      <el-header style="text-align: right; font-size: 12px;height: 100px;">
      <h1 style="font-size: 30px; text-align: left;">检查录入</h1>
      </el-header>
       </el-header>  
       <h3>患者搜索</h3>
          <el-row>
            <el-col :span="10"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="病历号：" prop="patientName"  class="label">
     <el-select v-model="form.orderNo" placeholder="请选择">

     </el-select>
   </el-form-item>
  </el-col>
  <el-col :span="10"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="姓名：" prop="patientName"  class="label">
     <el-select v-model="form.patientName" placeholder="请选择">

     </el-select>
   </el-form-item>
  </el-col>
  <el-col :span="4">
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetForm">重置</el-button>
  </el-col>
</el-row>
<h3>患者信息</h3>
  <el-row>
      <el-col :span="6">
      <el-form-item label="姓名：" prop="fangStatus" class="label" >
     <el-select v-model="form.patientName" placeholder="请选择">   
      <el-option label="全部" value="1"></el-option>
      <el-option label="待挂号" value="2"></el-option>
      <el-option label="已挂号" value="3"></el-option>
      <el-option label="已取消" value="4"></el-option>
     </el-select>
     </el-form-item>
     </el-col>
      <el-col :span="6">
        <el-form-item label="身份证号：" prop="identityNo" class="label" >
          <el-input v-model="form.identityNo" label="身份证号"></el-input>
        </el-form-item>    

  </el-col>
  <el-col :span="6">
     <el-form-item label="性别：" prop="fangStatus" class="label" >
     <el-select v-model="form.gender" label="性别">
      <el-radio label="男" value="1"></el-radio>
      <el-radio label="女" value="0"></el-radio>
      
     </el-select>
     </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="年龄：" prop="age" class="label" >
      <el-select v-model="form.age" placeholder="请选择" label="年龄">   
     
    </el-select>
    </el-form-item>
 
  </el-col>
  </el-row>  

            <div class="box" style="background-color: white;width: 800px;height: 300px;margin: 20px;">
    <el-row :gutter="20">
        <el-tag type="primary" style="margin-left: 20px;">当前选择的处置项目是:</el-tag>
    </el-row>
                <el-row :gutter="20">
           
    <el-col :span="6"><div class="grid-content ep-bg-purple" ><h3 style="color: black;">编号：{{  }}</h3></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" ></div></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" >姓名：{{  }}</div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" >创建医生：{{  }}</div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" >处置编码:{{  }}</div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" >处置规格:{{  }}</div></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" >性别：</div></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" >费用分类:{{  }}</div></el-col>
 
    <el-col :span="4"><div class="grid-content ep-bg-purple" >
        <div class="status">状态</div>
        <div class="status" style="font-size: 30px;color: black;">{{  }}1</div></div>
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" >
        <div class="status">处置费用</div>
        <div class="status" style="font-size: 30px;color: black;">￥{{  }}</div>
    </div>

</el-col>
</el-row>
    <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content ep-bg-purple" >年龄：</div></el-col>
     
    <el-col :span="4"><div class="grid-content ep-bg-purple" >单价:{{  }}</div></el-col>
    <el-col :span="12"><div class="grid-content ep-bg-purple" >创建时间：{{ new Date() }}</div></el-col>
    </el-row>
 
    <el-button style=" margin: 20px;" type="primary">重置医生</el-button>
    <el-select style="width: 200px;margin: 20px;" placeholder="请选择科室"></el-select>
    <el-select style="width: 200px;margin: 20px;" placeholder="请选择医生"></el-select>
            </div>
            <div class="input" style="margin:20px;">
                处置内容：
                <el-input   placeholder="请输入处置结果" style="width: 700px;height: 100px;margin-left: 20px;"> </el-input>
            </div>

 
            <el-button style="margin: 20px;" type="primary">提交申请</el-button>
            <el-button type="primary">重置输入</el-button>
            <el-button style="margin: 50px;width: 200px;"  type="success">打印结果</el-button>
   </template>
   
   <script lang="ts" setup name="CheckNormal">
 import axiosInstance from '@/utils/axiosUtils';
import { ref } from 'vue';
import { reactive, toRefs } from 'vue'
 

const source = ref(0)
 
source.value = 172000
const tableData =reactive( [{
  
}
])
const form = reactive({
 orderNo:'',
 patientName:'',
 identityNo:'',
 gender:'',
 age:'',
 checkStatus:1,
 deptName:null,
 orderDate:null,
 pageNum:1,
 pageSize:10,
 total:0,

});
//清空表单函数
const resetForm=()=>{
for(const key in form){
  form[key]='';
}
};
const search=()=>{
};
 
axiosInstance.get("/api/register/getOrderNo?id="+1).then(
response=>{
  console.log('success'+response.data);
  form.orderNo=response.data;
}
).catch(error=>{
console.log('error');
})


</script>






<style lang="css" link-ref="main.css"/>
 <style scoped> 
  h1{
    padding-left: 30px;
    
  }
 .label{
  display: inline-block;
  width: 200px;
   color: grey;
  padding-left: 30px;
  
 }
 .grid-content{
    margin-left: 20px;
 }
.el-row:last-child {
    margin-left: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
 color: grey;
}
 h3{
  padding-left: 20px;
 }
 .demo-basic {
  text-align: right;
  margin-left: 20px;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-left: 20px;
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: flex-end;
  align-items: right;

}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}


</style>